<template>
  <div class="container">
    <div class="cropper">
      <vueCropper
        ref="cropper"
        :img="option.img"
        :outputSize="option.size"
        :outputType="option.outputType"
        :info="false"
        :canScale="true"
        :full="option.full"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :original="option.original"
        :autoCrop="option.autoCrop"
        :fixedBox="option.fixedBox"
        :centerBox="option.centerBox"
        :fixed="true"
        :fixedNumber="[1, 1]"
      >
      </vueCropper>
    </div>
    <div class="footer-btn">
      <label class="btn btn-block" for="uploads">更换图片</label>
      <!--<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">-->
      <input
        ref="upload"
        type="file"
        id="uploads"
        style="position:absolute; clip:rect(0 0 0 0);"
        accept="image/jpeg,image/jpg,image/png"
        @change="uploadImg($event)"
      />
      <button class="btn btn-block" @click="upload">上传头像</button>
    </div>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";
import { fileUpload } from "@/api/file";
import { profileEdit } from "@/api/profile";
export default {
  data() {
    return {
      option: {
        img: "",
        size: 1,
        full: false,
        outputType: "png",
        canMove: true,
        original: false,
        canMoveBox: false,
        autoCrop: true,
        autoCropWidth: 200,
        autoCropHeight: 200,
        fixedBox: true,
        centerBox:true
      }
    };
  },
  methods: {
    uploadImg(e) {
      //上传图片 //
      let vue = this;
      let file = e.target.files[0];
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        this.$dialog.toast({
          mes: "图片类型必须是gif,jpeg,jpg,png中的一种",
          timeout: 2000
        });
        return false;
      }
      if (window.FileReader) {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        //监听文件读取结束后事件
        reader.onloadend = function(e) {
          vue.option.img = e.target.result; //e.target.result就是最后的路径地址
        };
      }
    },
    upload() {
      this.$refs.cropper.startCrop();
      this.$refs.cropper.getCropBlob(data => {
        // do something
        let fd = new FormData();
        console.log(data)
        fd.append("file", data);
        fileUpload(fd).then(res => {
          if (res.status === 200) {
            profileEdit({ avatar: res.data.data.file }).then(res1 => {
              if (res1.status === 200) {
                this.$dialog.toast({
                  mes: "修改头像成功",
                  timeout: 1000,
                  callback: () => {
                    this.$router.back(-1);
                  }
                });
              } else {
                //									this.$dialog.toast({mes:'头像更新失败',timeout:1000})
              }
            });
          } else {
            //							this.$dialog.toast({mes:'头像上传失败',timeout:1000})
          }
        });
      });
    }
  },
  components: {
    VueCropper
  },
  created() {
    // this.option.img = window.localStorage.getItem("imageUrl");
    // this.option.autoCropHeight = document.body.clientWidth * 0.8;
    // this.option.autoCropWidth = document.body.clientWidth * 0.8;
  }
};
</script>

<style scoped>

.cropper {
  width: 12rem;
  height: 12rem;
  margin: 0.48rem auto;
}

.footer-btn .btn {
  display: block;
  background-color: darkred;
  height: 1.6rem;
  font-size: 0.68rem;
  color: white;
  margin: 10px auto;
  width: 90%;
  text-align: center;
  line-height: 1.6rem;
  border: none;
  border-radius: 0.12rem;
  background: #0078ff;
  font-family: "微软雅黑";
}
</style>